import React from 'react';

interface TypographyProps {
  children: React.ReactNode;
  className?: string;
}

export function DisplayLarge({ children, className = '' }: TypographyProps) {
  return (
    <h1 className={`font-['Geist'] font-semibold text-[96px] leading-[152.994px] tracking-[-1.92px] ${className}`}>
      {children}
    </h1>
  );
}

export function Heading1({ children, className = '' }: TypographyProps) {
  return (
    <h1 className={`font-['Geist'] font-medium text-[48px] leading-[52.8px] tracking-[-0.96px] ${className}`}>
      {children}
    </h1>
  );
}

export function Heading2({ children, className = '' }: TypographyProps) {
  return (
    <h2 className={`font-['Geist'] font-medium text-[36px] leading-[36.214px] tracking-[-0.8148px] ${className}`}>
      {children}
    </h2>
  );
}

export function Heading3({ children, className = '' }: TypographyProps) {
  return (
    <h3 className={`font-['Geist'] font-normal text-[20px] leading-[26px] tracking-[-0.96px] ${className}`}>
      {children}
    </h3>
  );
}

export function BodyLarge({ children, className = '' }: TypographyProps) {
  return (
    <p className={`font-['Geist'] font-normal text-[18px] leading-[23px] ${className}`}>
      {children}
    </p>
  );
}

export function BodyMedium({ children, className = '' }: TypographyProps) {
  return (
    <p className={`font-['Geist'] font-normal text-[16px] leading-[21px] ${className}`}>
      {children}
    </p>
  );
}

export function BodySmall({ children, className = '' }: TypographyProps) {
  return (
    <p className={`font-['Geist'] font-normal text-[14px] leading-[18.107px] ${className}`}>
      {children}
    </p>
  );
}

export function LabelLarge({ children, className = '' }: TypographyProps) {
  return (
    <span className={`font-['Geist_Mono'] font-medium text-[16px] leading-[normal] ${className}`}>
      {children}
    </span>
  );
}

export function LabelMedium({ children, className = '' }: TypographyProps) {
  return (
    <span className={`font-['Geist_Mono'] font-medium text-[14px] leading-[20px] ${className}`}>
      {children}
    </span>
  );
}

export function LabelSmall({ children, className = '' }: TypographyProps) {
  return (
    <span className={`font-['Geist_Mono'] font-normal text-[12px] tracking-[1.56px] uppercase leading-[normal] ${className}`}>
      {children}
    </span>
  );
}

export function LabelTiny({ children, className = '' }: TypographyProps) {
  return (
    <span className={`font-['Geist_Mono'] font-light text-[11px] tracking-[1.76px] uppercase leading-[14px] ${className}`}>
      {children}
    </span>
  );
}

interface GradientTextProps extends TypographyProps {
  variant?: 'warm' | 'custom';
  from?: string;
  to?: string;
}

export function GradientText({ children, variant = 'warm', from, to, className = '' }: GradientTextProps) {
  const gradientColors = variant === 'warm' 
    ? 'from-[#faf1e9] to-[#edc29c]' 
    : `from-[${from}] to-[${to}]`;
  
  return (
    <span 
      className={`bg-gradient-to-b ${gradientColors} bg-clip-text ${className}`}
      style={{ WebkitTextFillColor: 'transparent' }}
    >
      {children}
    </span>
  );
}